<template>
	<view>
		<u-navbar :title="$t('邀请有奖')"></u-navbar>
		<view class="invite">
			<image class="bg" :src="viewbg" mode="widthFix"></image>
			<view class="invite-earnings" v-if="userInfo">
				<view class="earnings-list">
					<view class="earnings-list-text">{{$t('当前收益')}}</view>
					<view class="earnings-list-price">{{ userInfo.team_income_sum }}</view>
					<view style="color:#999"><text>{{$t('幸运币')}}</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/currency?sta=1')">{{$t('查看详情')}}
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<u-line color="#e4e7ed" :hair-line="false" direction="col" />
				<view class="earnings-list">
					<view class="earnings-list-text">{{$t('可提现收益')}}</view>
					<view class="earnings-list-price">{{ userInfo.integral }}</view>
					<view style="color:#999"><text>{{$t('幸运币')}}</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/currency?sta=1')">{{$t('查看详情')}}
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<u-line color="#e4e7ed" :hair-line="false" direction="col" />
				<view class="earnings-list">
					<view class="earnings-list-text">{{$t('已邀请')}}</view>
					<view class="earnings-list-price" style="color: #000">{{ userInfo.xj_count }}</view>
					<view style="color:#999"><text>{{$t('人')}}</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/myTeam')">{{$t('查看详情')}}
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="userInfo" class="invite_shareCode">
				<view class="invite_shareCode_view">
					<text class="text">{{$t('我的邀请码')}}：</text>
					<text class="ma">{{ share_ma }}</text>
					<text class="copy" @click="copysHareCode">{{$t('复制')}}</text>
				</view>
			</view>
			<view class="activityInfo">
				<view class="title">{{$t('活动说明')}}：</view>
				<view class="item">
					<view class="num">（1）</view>
					<view class="text">{{$t('确认邀请关系是否绑定成功;若未绑定成功')}}</view>
				</view>
				<view class="item">
					<view class="num">（2）</view>
					<view class="text">{{$t('邀请奖励可能存在延迟到账的情况，敬请谅解')}}</view>
				</view>
				<view class="item">
					<view class="num">（3）</view>
					<view class="text">{{$t('相同设备绑定邀请关系')}}</view>
				</view>
				<view class="item">
					<view class="num">（4）</view>
					<view class="text">{{$t('本活动最终解释权归本公司所有')}}</view>
				</view>
				<view class="item">
					<view class="num">（5）</view>
					<view class="text">{{$t('本活动与苹果公司无关')}}</view>
				</view>
			</view>
			<!-- <view style="height: 50rpx;background-color: red;">11111</view> -->
			<view class="share_btn_view">
				<div class="share_btn_text" :class="btnStyle" @click="openYqView">{{$t('立即邀请')}}</div>
				<!-- #ifndef MP-WEIXIN -->
				<!-- <img class="share_btn_img" src="https://sjmanghe.com/uploads/20220326/yaoqinganniu.png" alt="img"
					@click="openYqView" /> -->
				<image class="share_btn_img" src="../../../static/image/new/removebg-preview.png" alt="img"
					@click="openYqView" />
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<image class="share_btn_img" src="../../../static/image/new/removebg-preview.png" alt="img"
					@click="sharePoster" />
				<!-- #endif -->
			</view>
		</view>
		<u-popup v-model="yqModalView" mode="bottom" closeable>
			<view class="share_popup">
				<!-- <view class="view_item" @click="shareWx('WXSceneSession')">
					<img class="icon"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/138960ccaa6c2a554b704d277cf76717.png"
						alt="" />
					<img class="text"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/d49a5c54cfbc4b6f01789446c710580c.png"
						alt="" />
				</view>
				<view class="view_item" @click="shareWx('WXSceneTimeline')">
					<img class="icon"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/c66c260f731ad437e9c532276d44834e.png"
						alt="" />
					<img class="text"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/1dce7610b11ffa2b2bcc451116578444.png"
						alt="" />
				</view> -->
				<view class="view_item" @click="copysHare">
					<img class="icon"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/4b293567f806560999b4aaa0f54e0039.png"
						alt="" />
					<!-- 					<img class="text"
						src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240115/9f0d4c89b1761a6eae8e0619021a2bef.png"
						alt="" /> -->
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showPoster" mode="center" background="transparent">
			<view class="poster-box">
				<view class="img-box">
					<image :src="posterImage" mode="widthFix" style="width: 100%"></image>
				</view>
				<view class="btn-share">
					<view class="button" @tap="saveImage">{{$t('保存海报')}}</view>
					<view class="button" @tap="showPoster = false">{{$t('关闭海报')}}</view>
				</view>
			</view>
		</u-popup>
		<PosterCanvas ref="childCanvas" @handleSuccess="canvasSuccess" :h5LocalPosterCover="h5LocalPosterCover"
			:h5Url="url" :localPosterCover="localPosterCover" :shareUrl="codeShareUrl" :appShareUrl="share_url" />
	</view>
</template>

<script>
	import {
		saveImageToPhotosAlbum
	} from "@/uni_modules/sakura-canvas/js_sdk/utils/util";
	import PosterCanvas from "@/components/PosterCanvas.vue";
	import {
		app_type
	} from "@/utils/keyControl.js";
	export default {
		components: {
			PosterCanvas,
		},
		data() {
			return {
				share_ma: "", //分享码
				url: "",
				userInfo: null,
				showPoster: false,
				posterImage: "",
				codeShareUrl: "", // 小程序二维码
				share_url: "", // app分享
				localPosterCover: "",
				h5LocalPosterCover: "",
				viewbg: null,
				yqModalView: false, //邀请模态框
				hintText: "",
				btnStyle: ""
			};
		},
		onLoad() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: "/pages/my/login",
				});
			} else {
				this.share_ma = uni.getStorageSync("user").share_ma;
			}

			this.get_share_data();
			this.get_poster();
			this.get_my_share_url();
		},
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: '/pages/my/login'
				})
			}
			this.getUser();
			let language = uni.getStorageSync("mhlanguage");
			if (language === "en") {
				this.btnStyle = "share_btn_text1"
			} else if (language === "zh-cn") {
				this.btnStyle = "share_btn_text2"
			} else if (language === "br") {
				this.btnStyle = "share_btn_text3"
			} else if (language === "tl") {
				this.btnStyle = "share_btn_text4"
			} else if (language === "in") {
				this.btnStyle = "share_btn_text5"
			}
		},
		methods: {
			get_share_data() {
				this.$http({
						url: "api/common/get_general",
						data: {
							type: app_type,
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.viewbg = res.data.data.share_bg
							// 	#ifdef APP-PLUS || MP-WEIXIN
							uni.getImageInfo({
								src: res.data.data.share_ewm_bg, //分享海报背景图
								success: (image) => {
									this.localPosterCover = image.path;

								},
								fail: (err) => {
									console.log("图片失败---------err", err);
								},
								complete: (rej) => {
									console.log("图片结束---------rej", rej);
								},
							});
							// #endif
							// 	#ifdef H5
							this.getBase64(res.data.data.h5_share_ewm_bg);
							// #endif
						}
					})
					.catch((err) => {});
			},
			//获取我的专属邀请URL
			get_my_share_url() {
				this.$http({
						url: "api/common/get_my_share",
						data: {
							share_ma: this.share_ma,
							// #ifdef H5
							type: 0,
							// #endif

							// #ifdef MP-WEIXIN
							type: 1,
							// #endif

							// #ifdef APP-PLUS
							type: 2,
							// #endif
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.url = res.data.data;
							this.share_url = `${res.data.data}&app_client=dd`;
						}
					})
					.catch((err) => {});
			},
			openYqView() {
				this.yqModalView = true;
			},
			/**
			 * @Author: 15097322811 1447934599@qq.com
			 * @Date: 2024-01-15 17:41:27
			 * @description:分享微信、分享微信朋友圈
			 * @param scene 微信类型
			 * @return {*}
			 */
			shareWx(scene) {
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: this.share_url, //分享地址
					title: "邀您一起开盲盒！新人首抽0.01元！100%必出实物商品！",
					summary: "一发入魂，欧气满满！一发可能就中手机！全新开盒体验。",
					imageUrl: "https://sjmanghe.com/uploads/20220326/20240120204528.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					},
				});
			},
			// 复制邀请码
			copysHareCode() {
				if (this.share_ma == "") {
					this.$tip.tip(this.$t("出错了，请稍后再试"));
					return;
				}
				let dizhi = decodeURIComponent(this.share_ma);
				uni.setClipboardData({
					data: dizhi,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: this.$t("复制成功")
						});
					}
				});
			},
			// 复制链接
			copysHare() {
				if (this.share_url == "") {
					this.$tip.tip(this.$t("出错了，请稍后再试"));
					return;
				}
				let dizhi = decodeURIComponent(this.url);
				uni.setClipboardData({
					data: dizhi,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: this.$t("复制成功")
						});
					}
				});
			},

			// 获取小程序二维码
			get_poster() {
				this.$http({
					url: "api/member/get_wxamp_share_qrcode",
				}).then((res) => {
					if (res.data.code == 1) {
						this.codeShareUrl = res.data.data.qecode;
					}
				});
			},
			getUser() {
				this.$http({
						url: "api/member/get_user_info",
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.userInfo = res.data.data;
						}
					})
					.catch((err) => {});
			},
			sharePoster() {
				uni.showLoading({
					title: "生成中",
				});
				this.show = false;
				this.$refs.childCanvas.drawPoster().then(() => {
					uni.hideLoading();
				});
			},
			canvasSuccess(param) {
				const {
					showPoster,
					posterImage
				} = param;
				this.showPoster = showPoster;
				this.posterImage = posterImage;
			},
			async saveImage() {
				// #ifdef H5
				uni.showToast({
					title: "H5不支持API保存图片,请使用长按保存!!!",
					icon: "none",
				});
				return;
				// #endif
				const res = await saveImageToPhotosAlbum(this.posterImage);
				if (!res.success) {
					uni.showToast({
						title: "保存图片失败!!!",
						icon: "none",
					});
					return;
				}
				this.showPoster = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.invite {
		font-family: "Microsoft Yahei";
		width: 100%;
		position: relative;


		.bg {
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 1;
		}

		&-earnings {
			position: absolute;
			width: 610rpx;
			height: 250rpx;
			left: 70rpx;
			box-sizing: border-box;
			//background-color: red;
			top: 0;
			z-index: 9;
			margin-top: 1690rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.earnings-list {
			// text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&-text {
				font-size: 34rpx;
				font-weight: bold;
				color: #bf6cf1;
				padding: 5rpx 6rpx;
				border-radius: 5rpx;
			}

			&-price {
				color: #697bc5;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;

				text {
					font-size: 26rpx;
					margin-left: 6rpx;
					font-weight: normal;
				}
			}

			&-btn {
				color: #bf6cf1;
				font-size: 22rpx;
				margin-top: 30rpx;
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: rgba(105, 123, 197, 0.4);
				border-radius: 20rpx;
			}
		}

		.invite_shareCode {
			width: 100%;
			position: absolute;
			// left: 345rpx;
			box-sizing: border-box;
			top: 2085rpx;
			z-index: 9;
			font-size: 26rpx;

			.invite_shareCode_view {
				width: 500rpx;
				height: 125rpx;
				// line-height: 85rpx;
				background-color: #fecd28;
				border-radius: 25rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					color: #735fa6;
					font-size: 29rpx;
					font-weight: bold;
					margin-left: 10rpx;
					font-style: oblique;
				}

				.ma {
					font-size: 29rpx;
					width: 180rpx;
					text-align: left;
					color: #735fa6;
					font-weight: bold;
					font-style: oblique;
				}

				img {
					vertical-align: middle;
					width: 80rpx;
					height: 50rpx;
				}

				.copy {
					display: inline-block;
					width: 80rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 20rpx;
					color: #fff;
					text-align: center;
					background-color: #66458b;
					margin-right: 15rpx;
					margin-top: 17rpx;
				}
			}
		}

		.activityInfo {
			font-family: "Microsoft Yahei";
			width: 100%;
			position: absolute;
			box-sizing: border-box;
			top: 2220rpx;
			z-index: 9;
			font-size: 26rpx;
			padding: 25rpx;
			color: #fff;

			.title {
				font-weight: bold;
				font-size: 30rpx;
				box-sizing: border-box;
				padding-left: 15rpx;
			}

			.item {
				display: flex;
				background-color: rgba(102, 69, 139, 0.4);
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				margin-top: 25rpx;
				line-height: 32rpx;
				margin: 20rpx auto;
			}
		}

		.share_btn_view {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 60rpx;
			z-index: 10;
			z-index: 9;

			.share_btn_img {
				width: 450rpx;
				height: 120rpx;
				display: block;
				margin: 0 auto;
			}
			.share_btn_text {
				width: 450rpx;
				height: 120rpx;
				line-height: 140rpx;
				display: block;
				margin: 0 auto;
				text-align: center;
				position: absolute;
				color: #FFF;
				font-weight: bolder;
				z-index: 2;
				font-size: 36rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				padding-right: 70rpx;
				box-sizing: border-box;
			}
			.share_btn_text1 {
				letter-spacing: 6rpx;
			}
			.share_btn_text2 {
				letter-spacing: 18rpx;
			}
			.share_btn_text3 {
				letter-spacing: 15rpx;
			}
			.share_btn_text4 {
				letter-spacing: 10rpx;
			}
			


			.share-btn {
				background-color: #fff;
				margin: 0;
				padding: 0;
			}

			.share-btn::after {
				border: none;
			}
		}
	}

	.share_popup {
		height: 310rpx;
		background: url("https://sjmanghe.com/imageself/share_popup_bg.png") no-repeat;
		background-size: 100% 100%;
		display: flex;

		.view_item {
			flex: 1;
			text-align: center;
			display: flex;
			flex-flow: column;
			row-gap: 5rpx;
			align-items: center;
			box-sizing: border-box;
			padding-top: 90rpx;

			.icon {
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				width: 100rpx;
				height: 50rpx;
			}
		}
	}

	.poster-box {
		width: 600rpx;

		.btn-share {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx 80rpx;

			.button {
				background: #845ec2;
				padding: 0 30rpx;
				height: 70rpx;
				font-size: 26rpx;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}

	.share-btn {
		background-color: #fff;
		margin: 0;
		padding: 0;
	}

	.share-btn::after {
		border: none;
	}

	.img-box {
		width: 600rpx;
		overflow: hidden;
	}

	.yq_view_main {
		::v-deep .u-close--top-right {
			top: 7rpx !important;
		}
	}

	.invite .earnings-list-btn {
		width: 180rpx;
	}

	.earnings-list-text {
		height: 130rpx;
	}
</style>